<template>
  <div>
    <Dialog v-model="dialogVisible" :title="dialogTitle" width="840">
      <video-player
        class="video-player vjs-big-play-centered"
        :src="url"
        poster=""
        crossorigin="anonymous"
        playsinline
        controls
        :volume="0.6"
        :width="800"
        :playback-rates="[0.7, 1.0, 1.5, 2.0]"
      />
      <template #footer>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </template>
    </Dialog>
    <el-image-viewer v-if="showImageViewer" :url-list="[url]" @close="closeImgViewer" />
  </div>
</template>
<script setup>
import { ref } from 'vue'
import 'video.js/dist/video-js.css'
import { VideoPlayer } from '@videojs-player/vue'
const url = ref('')
const showImageViewer = ref(false)
const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题

/** 打开弹窗 */
const open = async (v, type) => {
  url.value = v
  dialogTitle.value = type === '1' ? '图片浏览' : '视频浏览'
  if (parseInt(type) === 1) {
    showImageViewer.value = true
  } else {
    dialogVisible.value = true
  }
}

defineExpose({ open }) // 提供 open 方法，用于打开弹窗

const closeImgViewer = () => {
  showImageViewer.value = false
}
</script>
